<template>
   <view>
      <uv-cell-group :border="true">
         <uv-cell :border="true" title="基础用法">
            <template v-slot:right-icon>
               <uv-number-box v-model="value1" step="1" @change="change"> </uv-number-box>
            </template>
         </uv-cell>
         <uv-cell :border="true" title="步长设置">
            <template v-slot:right-icon>
               <uv-number-box v-model="value2" :step="step1" @change="change"> </uv-number-box>
            </template>
         </uv-cell>
         <uv-cell :border="true" title="限制输入范围">
            <template v-slot:right-icon>
               <uv-number-box v-model="value3" step="1" :min="min1" :max="max1" @change="change">
               </uv-number-box>
            </template>
         </uv-cell>
         <uv-cell :border="true" title="限制输入整数">
            <template v-slot:right-icon>
               <uv-number-box v-model="value4" step="1" integer @change="change"> </uv-number-box>
            </template>
         </uv-cell>
         <uv-cell :border="true" title="禁用状态">
            <template v-slot:right-icon>
               <uv-number-box v-model="value5" step="1" :disabled="true" @change="change">
               </uv-number-box>
            </template>
         </uv-cell>
         <uv-cell :border="true" title="禁用输入框">
            <template v-slot:right-icon>
               <uv-number-box v-model="value6" step="1" :disabledInput="true" @change="change">
               </uv-number-box>
            </template>
         </uv-cell>
         <uv-cell :border="true" title="禁用长按">
            <template v-slot:right-icon>
               <uv-number-box v-model="value7" step="1" :longPress="false" @change="change">
               </uv-number-box>
            </template>
         </uv-cell>
         <uv-cell :border="true" title="固定小数位数">
            <template v-slot:right-icon>
               <uv-number-box v-model="value8" step="0.2" decimalLength="1" @change="change">
               </uv-number-box>
            </template>
         </uv-cell>
         <uv-cell :border="true" title="异步变更">
            <template v-slot:right-icon>
               <uv-number-box
                  v-model="value9"
                  step="1"
                  :asyncChange="asyncChange"
                  @change="myAsyncChange"
               >
               </uv-number-box>
            </template>
         </uv-cell>
         <uv-cell :border="true" title="自定义大小颜色样式">
            <template v-slot:right-icon>
               <uv-number-box
                  v-model="value10"
                  step="1"
                  :color="color"
                  :buttonSize="buttonSize"
                  :bgColor="bgColor"
                  @change="change"
                  iconStyle="color: #fff"
               >
               </uv-number-box>
            </template>
         </uv-cell>
         <uv-cell :border="true" title="自定义(为0时减少按钮会消失)">
            <template v-slot:right-icon>
               <uv-number-box v-model="value11" step="1" :min="0" :showMinus="value11 > 0">
                  <template v-slot:minus>
                     <view class="minus">
                        <uv-icon name="minus" size="12"> </uv-icon>
                     </view>
                  </template>
                  <template v-slot:input>
                     <text style="width: 50px; text-align: center" class="input">
                        {{ value11 }}
                     </text>
                  </template>
                  <template v-slot:plus>
                     <view class="plus">
                        <uv-icon name="plus" color="#FFFFFF" size="12"> </uv-icon>
                     </view>
                  </template>
               </uv-number-box>
            </template>
         </uv-cell>
      </uv-cell-group>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(3);
const value2 = ref(3);
const value3 = ref(3);
const value4 = ref(3);
const value5 = ref(3);
const value6 = ref(3);
const value7 = ref(3);
const value8 = ref(3.1);
const value9 = ref(3);
const value10 = ref(3);
const value11 = ref(3);
const step1 = ref(2);
const min1 = ref(5);
const max1 = ref(8);
const asyncChange = ref(true);
const color = ref('#fff');
const buttonSize = ref(36);
const bgColor = ref('#2979ff');

const change = (e: any) => {
   console.log('change', e);
};
const myAsyncChange = (e: any) => {
   asyncChange.value = false;
   uni.showLoading({
      title: '加载中...',
   });

   uni.$uv.sleep(3000).then(() => {
      uni.hideLoading();
      value9.value = e.value;
      asyncChange.value = true;
   });
};
</script>

<style lang="scss" scoped>
.minus {
   width: 22px;
   height: 22px;
   border-width: 1px;
   border-color: #e6e6e6;
   border-style: solid;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border-bottom-left-radius: 100px;
   border-bottom-right-radius: 100px;
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   justify-content: center;
   align-items: center;
}

.input {
   padding: 0 10px;
}

.plus {
   width: 22px;
   height: 22px;
   background-color: #ff0000;
   border-radius: 50%;
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   justify-content: center;
   align-items: center;
}
</style>
